import style from "./index.module.css";
import {DataTable} from "./components/DataTable"
import {ContactsTable} from "./components/ContactsTable"
import { Col, Row, Flex, Form, Input, Button, message, Space, Upload ,Select, DatePicker, Modal } from 'antd';
import { useStore } from './useStore';
import { useState,useEffect } from "react";
import { http } from "@/utils/request";
import dayjs from "dayjs";
//新增
import { AddChildrenModal } from './components/addChildrenModal';
import { AddEmergencyModal } from './components/addEmergencyModal';
import { ResultModal } from './components/resultModal';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import type { GetProp, UploadProps } from 'antd';
import Router from "next/router";
import { spaceChildren } from "antd/es/button";

const { Item } = Form;
const { confirm } = Modal;
function CustomTableForm() {
  const [form] = Form.useForm();
  const [isMarried,setIsMarried] = useState(false);
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState<string>();
  const [openAddOrEditChildrenModal,openAddOrEditEmergencyModal,resultModal] = useStore((state)=>[
    state.openAddOrEditChildrenModal,
    state.openAddOrEditEmergencyModal,
    state.resultModal
  ])
  const changeMarried = (value) =>{
    value=="2"?setIsMarried(true):setIsMarried(false);
  }
  const onFinish = async(values) => {
    values.birthDate = values.birthDate ? dayjs(values.birthDate).format('YYYY-MM-DD') : null;
    values.callCenterTime = values.callCenterTime ? dayjs(values.callCenterTime).format('YYYY-MM-DD') : null;
    values.graduationDate = values.graduationDate ? dayjs(values.graduationDate).format('YYYY-MM-DD') : null;
    values.partyMemberTime = values.partyMemberTime ? dayjs(values.partyMemberTime).format('YYYY-MM-DD') : null;
    values.workBeforeTransferTime = values.workBeforeTransferTime ? dayjs(values.workBeforeTransferTime).format('YYYY-MM-DD') : null;
    values.workTime = values.workTime ? dayjs(values.workTime).format('YYYY-MM-DD') : null;
    try {
      if(form.getFieldValue('id')){
        values.id = form.getFieldValue('id')
        const res = await http.post({
          url:'/PmPersonInfo/update',
          data:values
        })
        console.log(values)

        if(res.code == 200){
          spouseInformation(values)
          useStore.setState({resultModal:{open:true}})
          // 这里可以处理提交逻辑
          message.success('保存成功');
          getList()
        }else{
          message.error(res.msg);
        }
      }else{
        const res = await http.post({
          url:'/PmPersonInfo/add',
          data:values
        })
        if(res.code == 200){
          spouseInformation(values)
          useStore.setState({resultModal:{open:true}})
          // 这里可以处理提交逻辑
          message.success('保存成功');
          getList()
        }else{
          message.error(res.msg);
        }
      }
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  };
  // 新增/编辑配偶信息
  const spouseInformation = async(values: any) => {
    const data = {
      name:values.pname,
      gender:values.pgender.value,
      ethnicity:values.pethnicity,
      dateOfBirth:values.birthDate ? dayjs(values.birthDate).format('YYYY-MM-DD') : null,
      idNumber:values.idNumber,
      healthStatus:values.phealthStatus,
      workUnit:values.workUnit,
      job:values.job,
      mobilePhone:values.pmobilePhone,
      specialty:values.pspecialty,
      hobbies:values.phobbies,
    }
    console.log(form.getFieldValue('pid'))
    if(form.getFieldValue('pid')){
      data.id = form.getFieldValue('pid')
      data.personId = '81800630'
      try {
        const res = await http.post({
          url:'/PmPersonSpouse/update',
          data:data
        })
        if(res.code == 200){
          spouseInformationList(values.id)
        }else{
          message.error(res.msg);
        }
      } catch (errorInfo) {
        console.log(errorInfo);
      }
    }else{
      data.personId = '81800630'
      try {
        const res = await http.post({
          url:'/PmPersonSpouse/add',
          data:data
        })
        if(res.code == 200){
          spouseInformationList(values.id)
        }else{
          message.error(res.msg);
        }
      } catch (errorInfo) {
        console.log(errorInfo);
      }
    }
  }
  //查询个人信息接口
  const getList = async() =>{
    try {
      const res = await http.get({
        url:'/PmPersonInfo/qryDetailsById',
        params:{}
      })
      if(res.code == 200){
        res.data.birthDate = res.data.birthDate ? dayjs(res.data.birthDate) : null;
        res.data.callCenterTime = res.data.callCenterTime ? dayjs(res.data.callCenterTime) : null;
        res.data.graduationDate = res.data.graduationDate ? dayjs(res.data.graduationDate) : null;
        res.data.partyMemberTime = res.data.partyMemberTime ? dayjs(res.data.partyMemberTime) : null;
        res.data.workBeforeTransferTime = res.data.workBeforeTransferTime ? dayjs(res.data.workBeforeTransferTime) : null;
        res.data.workTime = res.data.workTime ? dayjs(res.data.workTime) : null;
        form.setFieldsValue(res.data)
        changeMarried(res.data.maritalStatus)
        if(res.data.maritalStatus == '2'){
          spouseInformationList(res.data.id)
        }
      }else{
        message.error(res.msg);
      }
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  }
  //查询配偶信息接口
  const spouseInformationList = async(id: any) =>{
    try {
      const res = await http.get({
        url:'/PmPersonSpouse/qryList',
        params:{
          personId:'81800630',
        }
      })
      if(res.code == 200){
        if(res.rows.length > 0){
          res.rows[0].dateOfBirth = res.rows[0].dateOfBirth ? dayjs(res.rows[0].dateOfBirth) : null;
          const data = {
            pname:res.rows[0].name,
            pgender: res.rows[0].gender,
            pethnicity:res.rows[0].ethnicity,
            dateOfBirth:res.rows[0].dateOfBirth,
            idNumber:res.rows[0].idNumber,
            phealthStatus:res.rows[0].healthStatus,
            workUnit:res.rows[0].workUnit,
            job:res.rows[0].job,
            pmobilePhone:res.rows[0].mobilePhone,
            pspecialty:res.rows[0].specialty,
            phobbies:res.rows[0].hobbies,
            pid:res.rows[0].id,
          }
          form.setFieldsValue(data)
        }

      }else{
        message.error(res.msg);
      }
    } catch (errorInfo) {
      console.log(errorInfo);
    }
  }
  // 配偶信息删除
  const spouseDel = async() => {
    try {
      const res = await http.delete({
        url:'/PmPersonSpouse/remove',
        params:{
          deleteId:form.getFieldValue('pid')
        }
      })
      if(res.code == 200){
        message.success('删除成功')
        spouseInformationList(form.getFieldValue('id'))
      }
    }catch (errorInfo) {
      console.log(errorInfo)
    }
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
  const getBase64 = (img: FileType, callback: (url: string) => void) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
  };

  const beforeUpload = (file: FileType) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('只能上传JPG或者PNG文件!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片必须小于2MB!');
    }
    return isJpgOrPng && isLt2M;
  };
  const handleChange: UploadProps['onChange'] = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj as FileType, (url) => {
        setLoading(false);
        setImageUrl(url);
      });
    }
  };
  const uploadButton = (
    <button style={{ border: 0, background: 'none' }} type="button">
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </button>
  );
  useEffect(()=>{
    getList()
  },[])
  return (
    <div>
      <Form
        form={form}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        className={style.tableInfo}
      >
        {/* 个人信息 */}
        <Row style={{display:"flex",justifyContent:"space-between",margin:"20px 0",alignContent:"center"}}>
          <div className={style.title} style={{margin:"0"}}>个人信息</div>
          <Form.Item className="flex flex-row-reverse pb-[20px]" style={{marginBottom:"0",paddingBottom:"0"}}>
            <Space>
              <Button onClick={()=>{
                Router.push('/performanceManagement/personalCenter')
              }}>
                返回
              </Button>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Space>
          </Form.Item>
        </Row>
        <Row className={style.customTable}>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>姓名</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="name"
                  rules={[{ required: true, message: '请填写姓名!' }]}
                >
                  <Input placeholder="请输入姓名" disabled style={{ border: 'none' }} />
                </Form.Item>
              </Col>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>身份证号码</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="idNo"
                  rules={[{ required: true, message: '请填写身份证号码!' }]}
                >
                  <Input placeholder="请输入身份证号码" disabled style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>性别</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
              <Form.Item name="gender" rules={[{ required: true, message: '请选择性别!' }]}>
                <Select placeholder="请选择性别" labelInValue options={[
                  { value: '1', label: '男' },
                  { value: '2', label: '女' },
                ]} />
              </Form.Item>
              </Col>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>健康状态</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="healthStatus"
                  rules={[{ required: true, message: '请填写健康状态!' }]}
                >
                  <Select placeholder="请选择健康状态" options={[
                    { value: '1', label: '健康' },
                    { value: '2', label: '良好' },
                    { value: '3', label: '较差' },
                  ]} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>民族</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="ethnicity"
                  rules={[{ required: true, message: '请填写民族!' }]}
                >
                  <Input placeholder="请输入民族" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>身高（cm）</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="height"
                  rules={[{ required: true, message: '请填写身高!' }]}
                >
                  <Input placeholder="请输入身高" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd} style={{height:"136px"}}>
                <span style={{ color: 'red' }}>*</span>
                <strong>照片</strong>
              </Col>
              <Col span={14} className={style.valueTd} style={{height:"136px"}}>
              <Upload
                name="photograph"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
                beforeUpload={beforeUpload}
                onChange={handleChange}
              >
                {imageUrl ? <img src={imageUrl} alt="photograph" style={{ width: '100%' }} /> : uploadButton}
              </Upload>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>婚姻状况</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="maritalStatus"
                  rules={[{ required: true, message: '请选择婚姻状况!' }]}
                >
                  <Select placeholder="请选择婚姻状况" onChange={changeMarried} options={[
                    { value: '1', label: '未婚' },
                    { value: '2', label: '已婚' },
                    { value: '3', label: '丧偶' },
                    { value: '4', label: '离异' },
                  ]} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>是否晚婚</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="whetherMarryLate"
                  rules={[{ required: true, message: '请填写是否晚婚!' }]}
                >
                  <Select placeholder="请选择是否晚婚" options={[
                    { value: '1', label: '是' },
                    { value: '2', label: '否' },
                  ]} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>参加工作时间</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="workTime"
                  rules={[{ required: true, message: '请填写参加工作时间!' }]}
                >
                <DatePicker placeholder="请选择参加工作时间" style={{border: 'none',width:'100%'}} /> 
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <strong>原职务</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="formerPost"
                >
                  <Input placeholder="请输入原职务" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>政治面貌</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="politicsStatus"
                  rules={[{ required: true, message: '请填写政治面貌!' }]}
                >
                  <Input placeholder="请输入政治面貌" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <strong>入党时间</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="partyMemberTime"
                >
                  <DatePicker placeholder="请选择入党时间" style={{border: 'none',width:'100%'}} /> 
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>调入中心时间</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="callCenterTime"
                  rules={[{ required: true, message: '请填写调入中心时间!' }]}
                >
                  <DatePicker placeholder="请选择调入中心时间" style={{border: 'none',width:'100%'}} /> 
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>调入前工作时间</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="workBeforeTransferTime"
                  rules={[{ required: true, message: '请填写调入前工作时间!' }]}
                >
                  <DatePicker placeholder="请选择调入前工作时间" style={{border: 'none',width:'100%'}} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <strong>曾获得荣誉</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="haveWonHonors"
                >
                  <Input placeholder="请输入曾获得荣誉" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <strong>全日制学历</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="fullTimeDegree"
                >
                  <Input placeholder="请输入全日制学历" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>在职最高学历</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="highestEducationLevelWhileEmployed"
                  rules={[{ required: true, message: '请填写在职最高学历!' }]}
                >
                  <Input placeholder="请输入在职最高学历" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>技术职称</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="technicalTitles"
                  rules={[{ required: true, message: '请填写技术职称!' }]}
                >
                  <Input placeholder="请输入技术职称" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <strong>毕业院校</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="graduateSchool"
                >
                  <Input placeholder="请输入毕业院校" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <strong>毕业时间</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="graduationDate"
                >
                  <DatePicker placeholder="请选择毕业时间" style={{border: 'none',width:'100%'}} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <strong>出生日期</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="birthDate"
                >
                  <DatePicker placeholder="请选择出生日期" style={{border: 'none',width:'100%'}} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>体重（kg）</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="weight"
                  rules={[{ required: true, message: '请填写体重!' }]}
                >
                  <Input placeholder="请输入体重" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <strong>所学专业</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="major"
                >
                  <Input placeholder="请输入所学专业" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>办公电话</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="officePhone"
                  rules={[{ required: true, message: '请填写办公电话!' }]}
                >
                  <Input placeholder="请输入办公电话" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>手机号码</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="mobilePhone"
                  rules={[{ required: true, message: '请填写手机号码!' }]}
                >
                  <Input placeholder="请输入手机号码" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
            <Row>
              <Col span={10} className={style.lableTd}>
                <strong>车牌号</strong>
              </Col>
              <Col span={14} className={style.valueTd}>
                <Form.Item
                  name="licensePlateNumber"
                >
                  <Input placeholder="请输入车牌号" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 24 }} lg={{ span: 24 }} xl={{ span: 12 }} xxl={{ span: 12 }} className={style.customRow}>
            <Row>
              <Col span={5} className={style.lableTd}>
                <span style={{ color: 'red' }}>*</span>
                <strong>现家庭住址</strong>
              </Col>
              <Col span={19} className={style.valueTd}>
                <Form.Item
                  name="currentAddress"
                  rules={[{ required: true, message: '请填写现家庭住址!' }]}
                >
                  <Input placeholder="请输入现家庭住址" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 24 }} lg={{ span: 24 }} xl={{ span: 12 }} xxl={{ span: 12 }} className={style.customRow}>
            <Row>
              <Col span={5} className={style.lableTd}>
                <strong>特长</strong>
              </Col>
              <Col span={19} className={style.valueTd}>
                <Form.Item
                  name="specialty"
                >
                  <Input placeholder="请输入特长" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
          <Col md={{ span: 24 }} lg={{ span: 24 }} xl={{ span: 24 }} xxl={{ span: 24 }} className={style.customRow}>
            <Row>
              <Col span={3} className={style.lableTd} style={{maxWidth:"10.4%"}}>
                <strong>兴趣爱好</strong>
              </Col>
              <Col span={21} className={style.valueTd} style={{minWidth:"89.6%"}}>
                <Form.Item
                  name="hobbies"
                >
                  <Input placeholder="请输入兴趣爱好" style={{ border: 'none' }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
        </Row>
        {/* 配偶基本信息 */}
        {isMarried && 
          <>
            <Row style={{display:"flex",justifyContent:"space-between",margin:"20px 0",alignContent:"center"}}>
              <div className={style.title} style={{margin:"0"}}>配偶基本信息</div>
              <Form.Item className="flex flex-row-reverse pb-[20px]" style={{marginBottom:"0",paddingBottom:"0"}}>
                <Space>
                  <Button type='primary' onClick={()=>{
                    confirm({
                      title: '提示?',
                      content: '此操作将永久删除该数据，是否继续?',
                      onOk() {
                        spouseDel()
                      },
                    });
                  }}>删除</Button>
                </Space>
              </Form.Item>
            </Row>
            <Row className={style.customTable}>
              <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
                <Row>
                  <Col span={10} className={style.lableTd}>
                    <span style={{ color: 'red' }}>*</span>
                    <strong>姓名</strong>
                  </Col>
                  <Col span={14} className={style.valueTd}>
                    <Form.Item
                      name="pname"
                      rules={[{ required: true, message: '请填写姓名!' }]}
                    >
                      <Input placeholder="请输入姓名" style={{ border: 'none' }} />
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
                <Row>
                  <Col span={10} className={style.lableTd}>
                    <span style={{ color: 'red' }}>*</span>
                    <strong>性别</strong>
                  </Col>
                  <Col span={14} className={style.valueTd}>
                    <Form.Item name="pgender" rules={[{ required: true, message: '请选择性别!' }]}>
                      <Select placeholder="请选择性别" labelInValue options={[
                        { value: '1', label: '男' },
                        { value: '2', label: '女' },
                      ]} />
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
                <Row>
                  <Col span={10} className={style.lableTd}>
                    <span style={{ color: 'red' }}>*</span>
                    <strong>民族</strong>
                  </Col>
                  <Col span={14} className={style.valueTd}>
                    <Form.Item
                      name="pethnicity"
                      rules={[{ required: true, message: '请填写民族!' }]}
                    >
                      <Input placeholder="请输入民族" style={{ border: 'none' }} />
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
                <Row>
                  <Col span={10} className={style.lableTd}>
                    <span style={{ color: 'red' }}>*</span>
                    <strong>出生日期</strong>
                  </Col>
                  <Col span={14} className={style.valueTd}>
                    <Form.Item
                      name="dateOfBirth"
                      rules={[{ required: true, message: '请填写出生日期!' }]}
                    >
                      <DatePicker placeholder="请选择出生日期" style={{border: 'none',width:'100%'}} />
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
                <Row>
                  <Col span={10} className={style.lableTd}>
                    <span style={{ color: 'red' }}>*</span>
                    <strong>身份证号码</strong>
                  </Col>
                  <Col span={14} className={style.valueTd}>
                    <Form.Item
                      name="idNumber"
                      rules={[{ required: true, message: '请填写身份证号码!' }]}
                    >
                      <Input placeholder="请输入身份证号码" style={{ border: 'none' }} />
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
                <Row>
                  <Col span={10} className={style.lableTd}>
                    <span style={{ color: 'red' }}>*</span>
                    <strong>健康状态</strong>
                  </Col>
                  <Col span={14} className={style.valueTd}>
                    <Form.Item
                      name="phealthStatus"
                      rules={[{ required: true, message: '请填写健康状态!' }]}
                    >
                      <Select placeholder="请选择健康状态" options={[
                        { value: '1', label: '健康' },
                        { value: '2', label: '良好' },
                        { value: '3', label: '较差' },
                      ]} />
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
                <Row>
                  <Col span={10} className={style.lableTd}>
                    <span style={{ color: 'red' }}>*</span>
                    <strong>工作单位</strong>
                  </Col>
                  <Col span={14} className={style.valueTd}>
                    <Form.Item
                      name="workUnit"
                      rules={[{ required: true, message: '请填写工作单位!' }]}
                    >
                      <Input placeholder="请输入工作单位" style={{ border: 'none' }} />
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
                <Row>
                  <Col span={10} className={style.lableTd}>
                    <strong>职务</strong>
                  </Col>
                  <Col span={14} className={style.valueTd}>
                    <Form.Item
                      name="job"
                    >
                      <Input placeholder="请输入职务" style={{ border: 'none' }} />
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
                <Row>
                  <Col span={10} className={style.lableTd}>
                    <span style={{ color: 'red' }}>*</span>
                    <strong>手机号码</strong>
                  </Col>
                  <Col span={14} className={style.valueTd}>
                    <Form.Item
                      name="pmobilePhone"
                      rules={[{ required: true, message: '请填写手机号码!' }]}
                    >
                      <Input placeholder="请输入手机号码" style={{ border: 'none' }} />
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col md={{ span: 8 }} lg={{ span: 8 }} xl={{ span: 6 }} xxl={{ span: 6 }} className={style.customRow}>
                <Row>
                  <Col span={10} className={style.lableTd}>
                    <strong>特长</strong>
                  </Col>
                  <Col span={14} className={style.valueTd}>
                    <Form.Item
                      name="pspecialty"
                    >
                      <Input placeholder="请输入特长" style={{ border: 'none' }} />
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col md={{ span: 24 }} lg={{ span: 24 }} xl={{ span: 12 }} xxl={{ span: 12 }} className={style.customRow}>
                <Row>
                  <Col span={5} className={style.lableTd}>
                    <strong>兴趣爱好</strong>
                  </Col>
                  <Col span={19} className={style.valueTd}>
                    <Form.Item
                      name="phobbies"
                    >
                      <Input placeholder="请输入兴趣爱好" style={{ border: 'none' }} />
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
            </Row>
          </>
        }
        <div className={style.title}>
          <span>子女信息列表</span>
          <Button type="primary" onClick={()=>openAddOrEditChildrenModal()}>新增</Button>
        </div>
        {/* 表格 */}
        <DataTable/>
        <div className={style.title}>
          <span>应急联系人</span>
          <Button type="primary" onClick={()=>openAddOrEditEmergencyModal()}>新增</Button>
        </div>
        {/* 表格 */}
        <ContactsTable/>
      </Form>
		  {/* 新增子女 */}
      <AddChildrenModal></AddChildrenModal>
		  {/* 新增应急联系人 */}
      <AddEmergencyModal></AddEmergencyModal>
		  {/* 个人信息保存结果弹窗 */}
      <ResultModal></ResultModal>
    </div>
  );
}

export default CustomTableForm;
